import React, { Component } from 'react'
import { Carousel } from 'antd-mobile';
import './style.less';
import API from '@/api/api';

const nos={
    display:'none'
}

class Carousels extends Component {
    state = {
        imgHeight:150,
        imgList: [],
    }
    getBanner = async (props) => {
        const imgList1 = await API.getBanner().then(res => {
            return res.data
        })
        this.setState({
            imgList: imgList1,
        });
    }
    componentDidMount() {
        // simulate img loading
        this.getBanner()
    }
  render() {
    return (
        <div className="banner">
            <Carousel
                autoplay={true}
                infinite={true}
                autoplayInterval={3000}
                dotStyle={nos}
                dotActiveStyle={nos}
            >
                {this.state.imgList.map(val => (
                    <div
                        key={val}
                        style={{ display: 'inline-block', width: '100%' }}
                    >
                        <img
                            src={val['imageAddress']}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top',height:'150px' }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                    </div>
                ))}
            </Carousel>
        </div>
    )
  }
}

export default Carousels